<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <cpn2></cpn2>
    </div>

    <template id="cpn2">
        <div>
            <h2>{{title}}</h2>  
            <p>养天地正气,法古今完人</p>  
        </div>
    </template>

    <script src="../js/vue.js"></script>
    <script>
        //全局组件注册的语法糖
        Vue.component('cpn2',{
            template: '#cpn2',
            //Vue组件有自己保存数据的地方,这个data属性必须是一个函数而且这个函数返回一个对象,对象内部保存着数据
            data(){ 
                return {
                    title: '苏州大学'
                }
            }
        })

        const app = new Vue({
            el: '#app',
            data: {
                message: '苏州大学'
            }
        })
    </script>
</body>
</html>